<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>这是1个</li>
        <li>这是2个</li>
        <li>这是3个</li>
        <li>这是4个</li>
        <li>这是5个</li>
    </ul>
    <script>
        var lis = document.querySelectorAll("li")
        for(var i = 0 ; i < lis.length ; i++){
            /* 
                1.在循环的过程当中,使用setAttribute给每一个标签都绑定一个属性与属性值 index = i;
                    每一个标签都有一个自定义属性 index
                    lis[i].setAttribute("index",i)
                2.标签身上已经存在了index这个自定义属性了
                    如果我们能够获取到这个标签,那么就可以获取到标签身上的属性对应的属性值了
                    问题:
                        如何获取这个标签 使用this => 谁调用,this指向谁?
                    获取那个下标简单了
                        this.getAttribute("index")
            */
            // 每一个标签都有一个自定义属性 index
            lis[i].setAttribute("index",i)

            lis[i].onclick = function(){
                console.log(this);
            }
        }
    </script>
</body>
</html>